<template>
    <div>
        <h2>基本设置</h2>
        <Form ref="form" :model="setInfo" :rules="rules" label-position="top" class="ivu-mt">
            <Row type="flex" :gutter="48">
                <Col v-bind="grid1">
                    <FormItem label="头像" prop="avatar">
                        <Avatar v-if="setInfo.head_img_url" :src="setInfo.head_img_url ? setInfo.head_img_url : baseImg" class="setting-account-info-avatar" shape="square" />
                        <Upload
                                :on-success="handleUploadSuccess"
                                :action="baseUrl + '/v1/file/images'"
                                :headers="{'Authorization': 'Bearer ' + token}"
                                :show-upload-list="false"
                                class="ivu-mt ivu-mb">
                            <Button icon="md-camera">修改头像</Button>
                        </Upload>
                    </FormItem>
                </Col>
                <Col v-bind="grid2">
                    <FormItem label="姓名" prop="realname">
                        <Input v-model="setInfo.realname" placeholder="请输入昵称" />
                    </FormItem>
                    <FormItem label="手机号" prop="mobile">
                        <Input v-model="setInfo.mobile" placeholder="请输入手机号" />
                    </FormItem>
                    <FormItem label="性别" prop= "gender">
                        <RadioGroup v-model="setInfo.gender">
                            <Radio label="1">男</Radio>
                            <Radio label="2">女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="所属项目" prop="company">
                        <Input v-model="setInfo.project_name" disabled placeholder="请输入项目" />
                    </FormItem>
                    <FormItem label="岗位" prop="post">
                        <Input v-model="setInfo.profession_name" disabled />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit">更新基本信息</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import { uploadUserSetting } from '@/api/settingUser'
    import settings from '@/setting'
    import util from '@/libs/util'
    import { mapActions } from 'vuex';
    export default {
        data () {
            return {
                baseUrl: settings.apiBaseURL,
                token: util.cookies.get('token'),
                grid1: {
                    xl: {
                        span: 12,
                        order: 2
                    },
                    lg: {
                        span: 24,
                        order: 1
                    },
                    md: {
                        span: 24,
                        order: 1
                    },
                    sm: {
                        span: 24,
                        order: 1
                    },
                    xs: {
                        span: 24,
                        order: 1
                    }
                },
                loading: false,
                baseImg: require('@/assets/images/avater.png'),
                grid2: {
                    xl: {
                        span: 12,
                        order: 1
                    },
                    lg: {
                        span: 24,
                        order: 2
                    },
                    md: {
                        span: 24,
                        order: 2
                    },
                    sm: {
                        span: 24,
                        order: 2
                    },
                    xs: {
                        span: 24,
                        order: 2
                    }
                },
                rules: {
                    realname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ]
                }
            }
        },
        props: {
            setInfo: {
                type: Object,
                required: true
            },
            userInfo: {
                type: Object,
                required: true
            }
        },
        methods: {
            ...mapActions('admin/user', ['set']),
            handleUploadSuccess (response) {
                this.setInfo.head_img = response.data.path
                this.setInfo.head_img_url = response.data.url
            },
            handleSubmit () {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let formData = {
                            realname: this.setInfo.realname,
                            mobile: this.setInfo.mobile,
                            gender: this.setInfo.gender,
                            head_img: this.setInfo.head_img || ''
                        }
                        // if (!this.setInfo.head_img) {
                        //     this.$Message.error('请修改头像!')
                        //     return false
                        // }
                        uploadUserSetting(formData).then(() => {
                            this.userInfo.head_img_url = this.setInfo.head_img_url || ''
                            this.set(this.userInfo)
                            this.$Message.success('信息更新成功!')
                        })
                    }
                });
            }
        }
    }
</script>
<style lang="less">
    .setting-account-info{
        &-avatar{
            width: 90px;
            height: 90px;
        }
    }
</style>
